<template>
  <div>
    <van-dropdown-menu >
      <van-dropdown-item title="综合" v-model="value1" disabled />
      <van-dropdown-item title="价格" v-model="value2" :options="option2" @input="fun(value2)"  />
      <van-dropdown-item title="分类" v-model="value3" :options="option3" @input="fun1(value3)"  />
    </van-dropdown-menu>
    <!-- 渲染的商品 -->
    <div id="goods">
      <ul>
          <li v-for="(item, index) in goodlist" :key="index" @click="change(item.id)">
            <h2>
              <img :src="item.list_pic_url" alt="" width="100%" />
            </h2>
            <div>
              <h4>{{ item.name }}</h4>
              <p>{{ item.retail_price | price }}</p>
            </div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["goodlist"],
  data() {
    return {
      value1:"",
      value2: "",
      value3: "",
      option1: [
        // { text: "综合", value: 0 },
        // { text: "新款商品", value: 1 },
        // { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "价格由低到高", value: "asc" },
        { text: "价格由高到低", value: " desc" },
      ],
      option3: [
        { text: "全部", value: "a" },
        { text: "居家", value: 1005000 },
      ],
    };
  },
  filters: {
    price(v) {
      return "¥" + v.toFixed(2) + "元";
    },
  },
  created(){
  },
  methods:{
    change(id){
        this.$router.push({
         path:"/details",
         query:{
           id:id
         }
       }) 
    },
    fun(val){
      this.$emit('jia',val)
    },
    fun1(val){
      // console.log(val);
      this.$emit('lei',val)
    }
    
  }
};
</script>

<style lang="less">
#goods {
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 48%;
      div {
        text-align: center;
        line-height: 0.3rem;
        font-size: small;
        p {
          color: #8b0000;
        }
      }
    }
  }
}
</style>